<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="common/common.css"/>
		<link rel="stylesheet" type="text/css" href="common/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
	</head>
	<body>
		<div class="container">
			<header>
				<div class="logo fl">
					<img src="common/images/logo.png"/>
				</div>
				<div class="top_r fr">
					<img src="common/images/wechact.png"/>
				</div>
				<nav class="fr">
					<ul>
						<li class="active"><a href="index.html">首页<p>home</p></a></li>
						<li><a href="game.html">游戏<p>game</p></a></li>
						<li><a href="case.html">案例<p>Case</p></a></li>
						<li><a href="about.html">关于我们<p>About us</p></a></li>
					</ul>
				</nav> 
			</header>
			<!--banner-->
			<div class="banner swiper-container">
				<div class="swiper-wrapper">
			        <div class="swiper-slide"><img src="common/images/banner.png"/></div>
			        <div class="swiper-slide"><img src="common/images/banner.png"/></div>
			        <div class="swiper-slide"><img src="common/images/banner.png"/></div>
			        <div class="swiper-slide"><img src="common/images/banner.png"/></div>
			   	</div>
			    <!-- 如果需要分页器 -->
    			<div class="swiper-pagination"></div>
			</div>
			<!--页面中部-->
			<footer>
				<div class="f_p">
					<p>Copyright © 2014 Pangtang. All Rights Reserved. 版权所有</p>
				</div>
				<div class="f_img">
					<img src="common/images/foot.png"/>
				</div>
			</footer>
		</div>
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
		<script>        
		  var mySwiper = new Swiper ('.swiper-container', {
//		    direction: 'vertical', // 垂直切换选项
		    loop: true, // 循环模式选项
		    autoplay:true,//自动切换
		    
		    // 如果需要分页器
		    pagination: {
		      el: '.swiper-pagination',
		    },
		    
//		    // 如果需要前进后退按钮
//		    navigation: {
//		      nextEl: '.swiper-button-next',
//		      prevEl: '.swiper-button-prev',
//		    },
//		    
//		    // 如果需要滚动条
//		    scrollbar: {
//		      el: '.swiper-scrollbar',
//		    },
		  }) 
		</script> 
	</body>
</html>
